<template>
	<view>
		<!-- 排序 -->
		<view class="header">
			<view 
				class="target"
				v-for="(target,index) in filterbyList"
				:key="index"
				@tap="select(index)"
				:class="{'on': target.selected}"
			>
				{{target.text}}
			</view>
		</view>
		<!-- 占位 -->
		<view class="place"></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" @tap="handleGoods(goods)" v-for="(goods) in goodsList" :key="goods.goods_id">
					<image :src="goods.img" mode="widthFix"></image>
					<view class="name">{{goods.name}}</view>
					<view class="info">
						<view class="price"><text>￥</text>{{goods.price}}</view>
						<view class="slogan">{{goods.slogan}}<text>人付款</text></view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	import interfaces from '../../utils/interfaces.js'
	export default {
		data() {
			return {
				goodsList: [],
				filterbyList: [
					{text:"全部",selected:true,filterby:'all'},
					{text:"口碑",selected:false,filterby:'public'},
					{text:"热门",selected:false,filterby:'hot'}
				],
				filterby: 'all',
				page: 1,
				size: 6,
				loadingText: "正在加载..."
			}
		},
		//option为object类型，会序列化上个页面传递的参数（home.vue【toCategory(e)】，category.vue【toCategory(e)】）
		onLoad(option) {
			//设置标题
			uni.setNavigationBarTitle({
				title: option.name
			})
			//加载数据
			this.loadData()
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			// 定时器，然后重置属性，最后停止下拉刷新
			setTimeout(() => {
				this.page = 1
				this.loadingText = "加载中..."
				this.goodsList = []
				this.loadData()
				uni.stopPullDownRefresh()
			}, 1000)
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			this.page++
			// page加1，请求新的数据，然后展现在页面中
			this.loadData()
		},
		methods: {
			loadData() {
				this.request({
					url: `${interfaces.getGoodsList}/${this.filterby}/${this.page}/${this.size}`,
					success: res => {
						if (res.data.length > 0) {
							res.data.forEach(item => this.goodsList.push(item))
						} else {
							this.loadingText = '到底了'
						}
					}
					
				})
			},
			select(index) {
				// 点击后将当前tab选项卡的selected变成true
				this.filterbyList[index].selected = true
				// 遍历filterList，将其余tab选项卡的selected变为false
				let len = this.filterbyList.length
				for (let i=0; i<len; i++) {
					if (i != index) {
						this.filterbyList[i].selected = false
					}
				}
				
				// 请求数据，重置相关数据
				this.filterby = this.filterbyList[index].filterby
				this.page = 1
				this.loadingText = "加载中..."
				this.goodsList = []
				this.loadData()
 			},
			handleGoods(goods) {
				// 页面跳转 商品详情
				uni.navigateTo({
					url: './goods?goodsInfo='+ JSON.stringify(goods)
				})
			}
		}
	}
</script>



<style lang="scss">
	.header {
		width: 92%;
		height: 79rpx;
		padding: 0 4%;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		border-bottom: solid 1rpx #eee;
		
		.target {
			width: 20%;
			height: 60rpx;
			margin-bottom: -2rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #aaa;
			
			&.on {
				font-size: 30rpx;
				font-weight: 600;
				border-bottom: 4rpx solid #f06c7a;
				color: #555;
			}
		}		
	}
	
	.place {
		height: 100rpx;
		background-color: #fff;
	}
	
	.goods-list {
		
		.product-list {
			width: 92%;
			padding: 0 4% 3vw 4%; 
			column-count:2;
			column-gap:1em;
			
			.product {
				margin: 0 0 15rpx 0;
				border-radius: 20rpx;
				box-shadow: 0rpx 5rpx 25rpx rgba(0, 0, 0, 0.1);
				background-color: #fff;
				break-inside: avoid;
				
				image {
					width: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}
				
				.name {
					width: 92%;
					padding: 6rpx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30rpx;
				}
				
				.info {
					width: 92%;
					padding: 10rpx 4% 10rpx 4%;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.price {
						font-size: 30upx;
						font-weight: 600;
						color: #e65339;
					}
					
					.slogan {
						font-size: 24upx;
						color: #807c87;			
					}
				}
			}
		}
	
		.loading-text {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #979797;
			font-size: 24rpx;
		}
	}
</style>
